import React from "react";
import { Spin } from "antd";
import { LoadingOutlined } from "@ant-design/icons";

import ReactDOM from "react-dom/client";

const antIcon = <LoadingOutlined style={{ fontSize: 48 }} spin />;
/**
 * @description 开启 Loading
 * */
export const startLoading = () => {
	const dom = document.createElement("div");
	dom.id = "views-full-screen-loading-2024-3-7";
	dom.style = `
	width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
	`;
	document.body.appendChild(dom);

	ReactDOM.createRoot(dom).render(<Spin indicator={antIcon} tip="Loading..." />);
};

/**
 * @description 结束 Loading
 * */
export const endLoading = () => {
	const el = document.getElementById("views-full-screen-loading-2024-3-7");
	if (el) {
		document.body.removeChild(el);
	}
};

/**
 * @description 显示全屏加载
 * */
let needLoadingRequestCount = 0;
export const showFullScreenLoading = options => {
	if (!options.loading) return;
	if (needLoadingRequestCount === 0) {
		startLoading();
	}
	needLoadingRequestCount++;
};

/**
 * @description 隐藏全屏加载
 * */
export const tryHideFullScreenLoading = options => {
	if (!options.loading) return;
	if (needLoadingRequestCount <= 0) return;
	setTimeout(() => {
		needLoadingRequestCount--;
		if (needLoadingRequestCount === 0) {
			endLoading();
		}
	}, 500);
};
